body {
  margin: 0;
  padding: 0;
  background-color: #2a4480;
}

.container {
  /* 经典水平和垂直居中布局 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 200px;

  overflow: hidden;
}

.container img {
  width: 100%;

  /* 
  我使用的图像宽高比例不是与.container的宽高比例相同的，需要设置如下样式属性和值使得img元素的尺寸与.container相同，
  并且图片(替换元素)自适应填满img盒子的尺寸，在盒子居中

  替换元素(图片)和img标签的尺寸之间关系以及object-fit的相关内容可以参考：
    [半深入理解CSS3 object-position/object-fit属性 « 张鑫旭-鑫空间-鑫生活](https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/)
  */
  height: 100%;
  object-fit: cover;
  object-position: center;

  /* 设置元素的过渡属性 */
  /* transtion: transition-time transition-property transition-timing-function */
  transition: 0.5s all ease-out;
}

.container img:hover {
  transform: scale(1.5) rotate(-30deg);
}
